<template>
	<view class="content">
		<uni-nav-bar statusBar="true" fixed="true" color="#fff" background-color="#366de1" @clickLeft="returnPage" left-icon="left">
			<template #left>
				<uni-icons type="arrowthinleft" color="#97b4f0" size="24"></uni-icons>
			</template>
			<view class="search-box">
				<uni-icons type="search" color="#fff" size="24"></uni-icons>
				<input type="text" placeholder="大家都在搜“装修”" class="search-input" v-model="keywords" confirm-type="search" @confirm="confirm"
				 placeholder-style="color:#fff;" />
				<image src="/static/img/home/search-logo.png" class="search-logo"></image>
			</view>
		</uni-nav-bar>
		<view class="searchList-warp">
			<view class="uni-list">
				<view v-for="(item, index) in newsList" :key="index" class="news-item" @click="navToDetails(item)">
					<view class="news-media-list">
						<view class="title">{{item.title}}</view>
						<view class="infor">{{item.contentText}}</view>
						<view class="bot">
							<view class="bot-text author">
								<image class="type-icon" src="/static/img/home/zb-icon.png"></image>{{item.typeStr}}
							</view>
							<view class="bot-text area">
								<image class="type-icon" src="/static/img/home/diqu-icon.png"></image>{{item.diqu}}
							</view>
							<view class="bot-text time red">
								<image class="type-icon" src="/static/img/home/time-icon.png"></image>{{item.time}}
							</view>
							<!-- 附件 -->
							<view class="bot-text file" v-if="item.fujian==2">
								<image class="type-icon" src="/static/img/home/fujian.png"></image>附件
							</view>
							<!-- 标书 -->
							<view class="bot-text biaoshu" v-if="item.fujian==1">
								<image class="type-icon" src="/static/img/biaoshu.png"></image> 标书
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 上滑加载更多组件 -->
		<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
		<!-- 会员升级 -->
		<view class="shengjiFix" v-if="swiperImg.length>0 && !this.baseConfig.isIOSshenhe">
			<image :src="swiperImg[0].src" @click="goToPage(true, swiperImg[0].type, swiperImg[0].url)"></image>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import commonjs from '@/common/script/common.js';
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;
	let clicktype = '';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				keywords: '',
				current: 0,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				newsList: [],
				swiperImg: [],
				pagesize: 20,
				pageindex: 1,
				nexttoken: '',
			}
		},
		async onLoad(options) {
			// 获取屏幕宽度
			windowWidth = uni.getSystemInfoSync().windowWidth;
			if (!options.keysword == undefined && options.keysword != '') {
				this.keywords = options.keysword;
			}
			this.loadNewsList("refresh");
			this.loadAd()
		},
		onPullDownRefresh() {
			this.loadNewsList("refresh");
		},
		onReachBottom() {
			//this.status = 'loading';
			this.loadNewsList("add");
		},
		methods: {
			goToPage(checked, type, url) {
				
				commonjs.goToPage(checked, type, url)
			},
			returnPage() {
				uni.navigateBack({
					delta: 1
				})
			},
			//信息列表
			loadNewsList(type) {
				//type add 加载更多 refresh下拉刷新
				if (type === 'add') {
					if (this.status === "noMore") {
						return;
					}
					this.status = "loading";
				}
				if (type === 'refresh') {
					this.status = 'loading';
					uni.showNavigationBarLoading();
					this.pageindex = 1;
					this.nexttoken = '';
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 100
					});
				}
				//异步请求数据
				let data = this.initNewData();
				data.from = 4038;
				data.location = 4050;
				data.types = 31;
				data.keywords = this.keywords;
				data.pagesize = this.pagesize;
				data.page = this.pageindex;
				data.nexttoken = this.nexttoken;
				uni.request({
					url: this.baseConfig.serverURL + 'zhaobiao/SearchHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						uni.hideToast();
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
								uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
								uni.hideNavigationBarLoading();
							} else {
								//获取成功，绑定
								let list = res.data.other2.list;
								if (type === 'refresh') {
									this.newsList = []; //刷新前清空数组
								}
								if (list == undefined || list == '' || list.length <= 0) {
									this.status = "noMore";
									uni.stopPullDownRefresh();
									uni.hideNavigationBarLoading(); //关闭加载动画
									return;
								}
								this.nexttoken = res.data.other2.nexttoken;
								list.forEach(item => {
									item.time = item.time.split('T')[0];
									this.newsList.push(item);
								})
								this.status = "more";
								if (list.length < this.pagesize) {
									this.status = "noMore";
								}
								this.pageindex++;
								uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
								uni.hideNavigationBarLoading();
							}
						} else {
							uni.showToast({
								title: '获取失败！',
								icon: "none"
							});
							uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
							uni.hideNavigationBarLoading();
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '获取失败，可能已超时！',
							icon: "none"
						});
					},
				});

			},
			loadAd() {
				//异步请求数据
				let data = this.initNewData();
				data.location = 5250;
				uni.request({
					url: this.baseConfig.serverURL + 'Ad/AdBindHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
							} else {
								//获取成功，绑定
								let list_gg = res.data.other2.list;
								this.swiperImg = list_gg;
								console.log(JSON.stringify(res.data.other2.list))
							}
						} else {
							uni.showToast({
								title: '获取失败！',
								icon: "none"
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '获取失败，可能已超时！',
							icon: "none"
						});
					}

				})
			},

			//新闻详情
			navToDetails(item) {
				let url = "";
				let uri = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: 'detail?ly=huiyuanzhaobiao&data=' + encodeURIComponent(uri)
					// url: '../list2detail-detail/list2detail-detail?detailDate=' + encodeURIComponent(JSON.stringify(detail))
				});
			},
			confirm() {
				let keywords = this.keywords
				uni.navigateTo({
					url: '/pages/search/searchList?keysword=' + encodeURIComponent(keywords)
				})
			}
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		background-color: #f2f7fb;
	}

	.search-box {
		background-color: #5987e6;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 0rpx 15rpx;
		border-radius: 10rpx;
		width: 100%;
		height: 34px;

		.search-input {
			font-size: 24rpx;
			color: #fff;
			margin-left: 20rpx;
			width: 100%;
		}

		.search-logo {
			width: 143rpx;
			height: 26rpx;
		}
	}

	/* 顶部tabbar */
	.nav-bar {
		position: relative;
		z-index: 10;
		height: 90upx;
		white-space: nowrap;
		background-color: #2f69e0;

		.nav-item {
			display: inline-block;
			width: 150upx;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
			font-size: 30upx;
			color: #fff;
			position: relative;

			&:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 4upx solid #fff;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}

		.current {
			color: #fff;

			&:after {
				width: 50%;
			}
		}
	}

	.swiper-box {
		height: 100%;
	}

	.panel-scroll-box {
		height: 100%;

		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}

	view {
		display: flex;
		flex-direction: column;
	}

	.news-item {
		position: relative;
		width: 94%;
		padding: 24upx 30upx;
		border-bottom-width: 1px;
		border-color: #eee;
		background-color: #fff;
		box-sizing: border-box;
		margin: 20upx 3% 0;
		border-radius: 20upx;
	}

	.title {
		font-size: 28upx;
		color: #303133;
		line-height: 40upx;
		display: initial;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.list-badge {
		width: 15rpx;
		height: 15rpx;
		border-radius: 20rpx;
		background-color: #fa6551;
		display: inline-block;
		margin-right: 10px;
	}

	.infor {
		margin: 15upx 0;
		font-size: 24upx;
		color: #a4a4a4;
		line-height: 35upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.bot {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.author {
		font-size: 24upx;
		color: #2e8ff8;
		background-color: #e5f5ff;

		image {
			width: 32rpx;
			height: 30rpx;
		}
	}

	.time {
		background-color: #ffeeeb;
		color: #fe543e;
		font-size: 24upx;
	}

	.area {
		font-size: 24upx;
		color: #59c28a;
		background-color: #eef9f3;
	}

	.red {}

	.type-icon {
		margin-right: 5rpx;
		width: 32rpx;
		height: 30rpx;
	}

	.telphone {
		position: absolute;
		right: 20upx;
	}

	.bot-text {
		flex-direction: row;
		margin-right: 10rpx;
		align-items: center;
		border-radius: 10rpx;
		padding: 8rpx 10rpx;
		align-items: center;
	}

	.hot-img {
		width: 40upx;
		height: 51upx;
	}

	.file {
		color: #2f69e0;
		font-size: 26rpx;
	}

	.biaoshu {
		font-size: 26rpx;
		color: #0ab450;
	}

	.shengjiFix {
		position: fixed;
		bottom: 100rpx;
		left: 6%;
		z-index: 999;

		image {
			width: 163rpx;
			height: 145rpx;
		}
	}

	.backTop {
		position: fixed;
		bottom: 100rpx;
		right: 6%;
		z-index: 999;

		image {
			width: 94rpx;
			height: 92rpx;
		}
	}

	.fufeidiqu {
		position: fixed;
		bottom: 230rpx;
		right: 6%;
		z-index: 999;
		width: 92rpx;
		padding: 10rpx;
		height: 92rpx;
		border-radius: 92rpx;
		background-color: #fa6551;
		box-sizing: border-box;
		color: #fff;
		box-shadow: 0 0 16rpx rgba($color: #ffbeb7, $alpha: 0.75);
		font-size: 26rpx;
		text-align: center;
		line-height: 35rpx;

	}

	.xmlist-tag {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-top: 20rpx;

		.xmlist-tag-item {
			padding: 10rpx;
			font-size: 24rpx;
			background-color: #eff0f5;
			color: #5f6b93;
			border-radius: 8rpx;
			margin-right: 10rpx;
		}

		.xmlist-tag-item-gj {
			background-color: #eaf2ff;
			color: #306ae0;
		}
	}

	.xmlist-bottom {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		border-top: 1px solid #efefef;
		padding-top: 20rpx;

		.xmlist-area {
			color: #a4a4a4;
			font-size: 28rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-right: 20rpx;

			image {
				width: 40rpx;
				height: 39rpx;
				margin-right: 10rpx;
			}
		}
	}

	.zhongbiao {
		font-size: 24rpx;
		color: #fe543e;

		.zhongbiao-icon {
			width: 31rpx;
			height: 25rpx;
		}
	}
</style>
